new Vue({
    el: '#app',
    data: {
        items: [],
        isShow: false,
        item1Play: false,   // 存储item1是否已播放动画
        items2: [],

        items2Data: [
            {
                id: '1', text: 'aaaaa'
            },
            {
                id: '2', text: 'bbbbb'
            },
            {
                id: '3', text: 'ccccc'
            },
            {
                id: '4', text: 'ddddd'
            },
            {
                id: '5', text: 'eeeee'
            },
            {
                id: '6', text: 'fffff'
            },
            {
                id: '7', text: 'ggggg'
            },
            {
                id: '8', text: 'wwwww'
            },
        ],
        rowItems: {},   // 存储行元素的一些变量
        rowItemsIsLoadFinish: {
            header: false,
            row_1: false,
            row_2: false,
            row_3: false,
            row_4: false,
        },   // 存储没行元素是否加载完成
    },
    created() {

    },
    mounted() {
        this.initRowItemsData();

        this.scroll();
        /**
         * 监听滚动条 逻辑根据自己需求来哦
         */
        window.onscroll = () => {
            this.scroll();
        }
    },
    methods: {
        /**
         * 获取滚动条位置
         */
        getScrollTop() {
            let scrollPos;
            if (window.pageYOffset)
            {
                scrollPos = window.pageYOffset;
            }
            else if (document.compatMode && document.compatMode != 'BackCompat')
            {
                scrollPos = document.documentElement.scrollTop;
            }
            else if (document.body)
            {
                scrollPos = document.body.scrollTop;
            }
            return scrollPos;
        },

        scroll() {
            let scrollPos = this.getScrollTop();
            // console.log("scrollPos：",scrollPos);
            if (scrollPos == 0) {
                // alert("页面已到顶部")
            }
            this.listenerScroll(scrollPos);
            // this.listenerScroll1(scrollPos);
        },
        listenerScroll(scrollPos){

            // 当前屏幕可视高度
            let lookHeight = $(window).height();

            for (let rowItemsKey in this.rowItems) {
                let rowItem = this.rowItems[rowItemsKey];
                // 如果当前屏幕滚动条高度+屏幕可视高度>item距离顶部的高度时,则item1进入屏幕
                if ((scrollPos + lookHeight) > rowItem.topHeight) {
                    // console.log(rowItemsKey, '进来屏幕了');
                    // 当item未播放时,再执行初始化数据的函数
                    if (!this.rowItemsIsLoadFinish[rowItemsKey]) {
                        this.rowItemsIsLoadFinish[rowItemsKey] = true;
                        console.log(rowItemsKey, '开始播放动画');
                        // this.initData();
                    }

                }

            }
        },
        initData() {
            this.items = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
        },
        // 初始化行元素一些参数
        initRowItemsData() {

            let animations = $('.animation');

            let rowItemsData = {};

            for (let i = 0; i < animations.length; i++) {

                let id = $(animations[i]).attr('id');
                // 获取改行距离顶部高度
                let topHeight = $(animations[i]).offset().top;

                let rowItem = {
                    topHeight: topHeight
                }
                rowItemsData[id] = rowItem;
                // 将该元素是否加载过标记为false
                this.rowItemsIsLoadFinish[id] = false;
                console.log(id);

            }

            this.rowItems = rowItemsData;


        },
    },
    updated: function () {
        this.$nextTick(function () {
            //  仅在整个视图都被重新渲染之后才会运行的代码
            this.scroll();
        })
    }
})